<script setup lang="ts">

import {useRouter} from "vue-router";
import {ref} from "vue";
import {closeToast, showFailToast, showLoadingToast, showSuccessToast} from "vant";
import {userLogin} from "@/api/UserApi";
import {useUserStore} from "@/stores/userStore";

const router = useRouter();
const userStore = useUserStore();

const userAccount = ref('');
const userPassword = ref('');
const onSubmit = async () => {
  try {
    // 模拟登录请求
    showLoadingToast('加载中...');
    console.log('登录信息:', userAccount.value, userPassword.value);
    const res = await userLogin({"userAccount": userAccount.value, "userPassword": userPassword.value});
    console.log(res.data)
    if (res.data.code === 0) {
      showSuccessToast('登录成功');
      // 这里可以添加跳转逻辑，例如使用 Vue Router 进行页面跳转
      userStore.saveLoginInfo(res.data.data)
      await router.push('/');
    } else {
      showFailToast('登录失败');
    }
  } catch (error) {
    console.error('表单验证失败:', error);
    // Message.error('登录失败');
    closeToast();
  } finally {
    closeToast();
    userAccount.value = '';
    userPassword.value = '';
  }
};


</script>

<template>
  <div>
    <div>
      <van-form @submit="onSubmit">
        <div>
          <van-cell-group inset>
            <van-field
                v-model="userAccount"
                name="userAccount"
                label="账户名"
                placeholder="账户名"
                :rules="[{ required: true, message: '请填写账户名' }]"
            />
            <van-field
                v-model="userPassword"
                type="password"
                name="userPassword"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登  录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>

<style scoped>

</style>
